import React , {useState} from 'react'


const HookComponent = () => {
    /*
      counter:初始化一个状态
      setCounter：以前改变counter，setState({}),现在直接调用setCounter
      useState():以前初始化直接赋值，useState(赋值）
     */
    const [counter, setCounter] = useState(110)
    const [List ,setList] = useState([
        {
            id:1001,
            name:"测试"
        },
        {
            id:122,
            name:'优化'
        }
    ])





    function clickHandle(){
        setCounter(2000)
    }

    return(
        <div>
            <h3>Hook 形式</h3>
            <div>
                <button onClick={clickHandle}>修改</button>
                <p>counter:{counter}</p>
            </div>
            <ul>
                {
                    List.map((ele,index) =>{
                        return <li key={index}>{ele.name}</li>
                    })
                }
            </ul>
        </div>
    )
}



export default HookComponent
